<template>
    <div>
      <h1>文件夹树</h1>
      <folder v-for="item in list" :key="item.id" :folder="item" />
    </div>
</template>
  
<script>
import Folder from './user.vue';  // 引入递归组件

export default {
    name: 'App',
    components: {
        Folder
    },
    data() {
        return {
            // 树形结构的数据
            list: [
                {
                    id: 1,
                    name: 'Folder 1',
                    children: [
                        { id: 2, name: 'File 1.1', children: [] },
                        { id: 3, name: 'File 1.2', children: [] }
                    ]
                },
                {
                    id: 4,
                    name: 'Folder 2',
                    children: [
                        {
                            id: 5,
                            name: 'Folder 2.1',
                            children: [
                                { id: 6, name: 'File 2.1.1', children: [] }
                            ]
                        }
                    ]
                }
            ]
        }
    }
};
</script>
  